<template>
	<view class="Menu-nav" @click="goJump" :style="{ '--font_color': parameter.font_color || '#333', '--tip_color': parameter.tip_color || '#999' }">
		<view class="Menu-nav-left">
			<view v-if="parameter.titleImg" class="left-img"><image mode="heightFix" class="img" :src="parameter.titleImg"></image></view>
			<view v-else-if="parameter.vert" class="vertical" :style="{ background: parameter.vert }"></view>
			<view class="left-title">{{ parameter.title }}</view>
		</view>
		<view class="Menu-nav-rigth" v-if="pageData[0].linkUrl && parameter.jumpTitle">
			<view class="right-title">{{ parameter.jumpTitle || '更多' }}</view>
			<view class="iconfont iconfont-e775"></view>
		</view>
	</view>
</template>

<script>
import { pageComponentsLink } from '@/utils/jump.js';
export default {
	props: ['templateItem'],
	data() {
		return {};
	},
	computed: {
		pageData() {
			return this.templateItem.pageData;
		},
		parameter() {
			return this.templateItem.parameter;
		}
	},
	methods: {
		goJump() {
			pageComponentsLink(this.pageData[0]);
		}
	}
};
</script>

<style lang="scss" scoped>
.Menu-nav {
	padding: 26rpx 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.Menu-nav-left {
	display: flex;
	align-items: center;
	.left-img {
		height: 38rpx;
		margin-right: 18rpx;
		.img {
			height: 100%;
		}
	}
	.vertical {
		width: 6rpx;
		height: 30rpx;
		background: red;
		margin-right: 14rpx;
	}
	.left-title {
		line-height: 38rpx;
		flex: 1;
		overflow: hidden;
		color: var(--font_color);
		font-size: 34rpx;
		font-weight: bold;
	}
}

.Menu-nav-rigth {
	display: flex;
	align-items: center;
	color: var(--tip_color);
	.right-title {
		font-size: 26rpx;
	}
	.iconfont {
		color: inherit;
	}
}
</style>
